import { CockpitChartBaseProps } from "../helps";
import React from "react";
import * as echarts from "echarts";
export interface KxFeePieChartProps extends CockpitChartBaseProps {
  img?: any;
}
import ReactECharts from "echarts-for-react";
import type { EChartsOption } from "echarts";
import { parseMoney } from "../utils/parseMoney";

export const getKxFeePieChartOption = ({
  dataSource = [],
}: KxFeePieChartProps): EChartsOption => {
  const total = dataSource.reduce((memo, cur) => {
    return memo + (cur.amount || 0);
  }, 0);

  const rich: any = {
    white: {
      align: "left",
      padding: [5, 0],
      fontSize: 11,
      fontFamily: "Arial",
      color: "#76F5B0",
    },
  };

  return {
    tooltip: {
      show: false,
    },
    legend: {
      show: false,
    },
    toolbox: {
      show: false,
    },
    series: [
      {
        name: "",
        type: "pie",
        clockwise: false,
        radius: [85, 90],
        label: {
          show: true,
          position: "outside",
          color: "#ddd",

          formatter: function (params: any) {
            const percent = ((params.value / total) * 100).toFixed(2);
            if (params.name !== "") {
              return (
                params.name +
                "\n{white|" +
                parseMoney(params.value, 0, true, true) +
                "万 " +
                percent +
                "%}"
              );
            } else {
              return "";
            }
          },
          rich: rich,
        },

        labelLine: {
          show: false,
        },

        data: dataSource.reduce<any[]>((memo, cur) => {
          memo.push(
            {
              value: cur.amount,
              name: cur.name,
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  shadowBlur: 30,
                  borderColor: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                    {
                      offset: 0,
                      color: "#7777eb",
                    },
                    {
                      offset: 1,
                      color: "#70ffac",
                    },
                  ]),
                  shadowColor: "rgba(142, 152, 241, 0.6)",
                },
              },
            },
            {
              value: (cur.amount || 0) * 0.1,
              name: "",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(0, 0, 0, 0)",
                  borderColor: "rgba(0, 0, 0, 0)",
                  borderWidth: 0,
                },
              },
            }
          );
          return memo;
        }, []),
      },
    ],
  };
};

const KxFeePieChart = ({
  reactEChartsProps,
  dataSource,
}: KxFeePieChartProps) => {
  return (
    <ReactECharts
      {...reactEChartsProps}
      style={{
        height: "250px",
      }}
      option={getKxFeePieChartOption({
        dataSource,
      })}
    />
  );
};

export default KxFeePieChart;
